<template>
    <div v-if="dish.sellVolume>0">
        <van-swipe-cell>
            <van-card
                    class="card">
                <!--标题-->
                <template #title>
                    <van-checkbox
                            class="dishCheckbox"
                            :name="dish.did"
                            v-model="radioNum">
                    </van-checkbox>
                    <h3 class="dishTitle">{{dish.title}}</h3>
                </template>
                <!--描述-->
                <template #desc>
                    <div class="van-ellipsis dishDesc">{{dish.description}}</div>
                </template>
                <!--图片-->
                <template #thumb>
                    <van-image
                            width="100"
                            height="100"
                            :src="dish.imgUrl" class="dishImg">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                        <template v-slot:error></template>
                    </van-image>
                </template>
                <template #tags>
                    <p class="dishSell">月售{{dish.sellVolume}}</p>
                    <van-tag class="dishPrice" type="primary">￥{{dish.price}}</van-tag>
                </template>
                <template #footer>
                    <van-button
                            v-if="dish.sellVolume==0"
                            icon="plus"
                            type="danger"
                            round
                            size="mini"
                            @click="clickAddDish"
                    />
                    <van-stepper
                            v-else
                            min="0"
                            max="99"
                            theme="round"
                            button-size="22"
                            disable-input
                            v-model.number="dish.sellVolume"
                            @change="addShoppingTrolley"
                    />
                </template>
            </van-card>
            <template #right>
                <van-button square
                            text="删除"
                            type="danger"
                            class="delete-button"
                            @click="deleteShoppingTrolley(dish.did)"/>
            </template>
        </van-swipe-cell>
    </div>
</template>

<script>
    export default {
        name: "DishShoppingTrolley",
        props:["dish","getShoppingTrolleyDishList"],
        computed:{
            userID(){
              return  sessionStorage.getItem('userID');
            }
        },
        data(){
            return {
                radioNum:false
            }
        },
        methods:{
            //添加购物车
            async addShoppingTrolley(){
                const {data:res}=await this.$http.get("/dish/addShoppingTrolley",
                    {params:{uid:this.userID,did:this.dish.did,number:this.dish.sellVolume}});
                if (res.status!=200)return this.$notify({type:"danger",message:"添加购物车失败"});
            },
            //点击添加按钮
            clickAddDish(){
                this.dish.sellVolume++;
                this.addShoppingTrolley();
            },
            //删除购物车
            async deleteShoppingTrolley(did){
               const{data:res}=await this.$http.
               delete(`/dish/deleteShoppingTrolley/${this.userID}/${did}`);
               if (res.status!=200)return this.$notify({type:"danger",message:"删除商品失败"});
               this.$notify({type:"primary",message:`${this.dish.title}已移除购物车`});
               this.getShoppingTrolleyDishList();
            }
        }
    }
</script>

<style scoped>
    .delete-button{
        height: 100%;
    }
    .dishDesc,.dishTitle,.dishPrice,.dishSell{
        margin-left: 40px;
    }
    .dishTitle{
        margin-top: 10px;
        font-size: 18px;
        color: coral;
    }
    .dishDesc{
        margin-top: -10px;
        font-size: 14px;
    }
    .dishPrice{
        margin-top: 3px;
        font-size: 14px;
    }
    .dishSell{
        margin-top: 2px;
        margin-bottom: 0;
    }
    .dishImg{
        margin-top: 20px;
        margin-left: 30px;
    }
    .dishCheckbox{
        transform: translateX(-95px) translateY(55px);
    }
</style>
